<template>
   <div id="Square" class="flex">
       <!-- 分类 -->
      <ArticleClassify id="ArticleClassify"/>
       <!-- 内容 -->
      <SquareArticle  id="SquareArticle" />
     

   </div>
</template>
<script>
import ArticleClassify from './ArticleClassify/ArticleClassify.vue'
import SquareArticle from './SquareArticle/SquareArticle.vue'
  export default 
  {
     components: { ArticleClassify, SquareArticle },
     name :'', 

  }
</script>
<style scoped>

@media screen and (max-width: 800px) {
    div#Square{
       flex-wrap: wrap;
       
    }
    div#ArticleClassify{
       width: 90vw;
       height: auto;
        padding: 20px;
       position: static;
       
    }
    div#SquareArticle{
      width: 90vw;
    }
}

#Square{
  width: 100%;
  height: calc(100vh - 70px);
  overflow: auto;
  flex-wrap: nowrap;
  position: relative;
}
/* 分类 */
#ArticleClassify{
   width: 20%;
   min-width: 350px;
   height: 98%;
   padding: 0px 40px;
   box-sizing: border-box;
   position: sticky;
   top: 2%;

}
/* 内容 */
#SquareArticle{
   width: 80%;
   height: 100%;
   min-width: 350px;
   padding: 20px;
   box-sizing: border-box;
   position: relative;
}


</style>